<template>
   <div v-if="getNowState">  
         <img   class="stateImg" :src="require('@/assets/state/'+getNowState.src)">     
         <div id="value">{{getNowState.value}}</div>      
   </div>
</template>
<script>
import {mapState} from 'vuex'
  export default 
  {
     name :'', 
     computed:{
       ...mapState('Music',['ContentState']),
       getNowState(){
         return this.imglist.find(item => item.state==this.ContentState)
       },
     },
     data() {
        return {
            imglist:[
                {src:'loading.png',state:2,value:'加载中...'},
                {src:'null.png',state:5,value:'空数据'},
                {src:'error.png',state:6,value:'网络或其他错误'},
            ]
        }
     },
  }
</script>
<style scoped>
.stateImg{
    width: 50%;
    max-width: 400px;
    object-fit: cover;
}
#value{
    width: 100%;
    text-align: center;
}
</style>